<template>
  <el-drawer
    title="选择图片"
    size="80%"
    close-on-click-modal
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose">
    <div class="fill-width-height flex-col" style="overflow: hidden">
      <ImgManage
        ref="imgManageRef"
        :isSelect="true"
        :isEdit="false"
        class="flex-1"
        style="overflow: auto"
      />
      <el-divider border-style="double" style="margin: 0"/>
      <div class="d-flex justify-center align-center" style="padding: 12px;">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="submit">确认</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import ImgManage from '../imgInfoManage'
export default {
  components: {
    ImgManage
  },
  props: {
  },
  data(){
    return {
      drawer: false,
      direction: 'rtl',
      itemObj: {
        imgfileid: '',
        ordernum: ''
      }
    }
  },
  methods: {
    init(){
      this.$refs?.imgManageRef?.resetSelectData()
    },
    open(){
      this.drawer = true
      this.$nextTick(() => {
        this.init()
      })
    },
    handleClose(done) {
      done();
    },
    successCallBack(){
      this.$modal.msgSuccess("选择成功")
      this.$emit('callBack')
      this.drawer = false
    },
    submit(){
      const selectData = this.$refs.imgManageRef.getAllSelectData()
      if(selectData?.length === 0){
        return this.this.$modal.msgWarning("请选择数据！")
      }
      const imagesUrls = selectData
        .filter(item => item?.fileid?.startsWith('http'))
        .map(item => item.fileid )
      this.$emit('selectUrlsCallBack', imagesUrls)
      this.successCallBack()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
